<template>
  <!-- 外层容器 -->
  <div class="min-h-screen relative">
    <!-- 第一层：背景图片 -->
    <div class="image-container">
      <img
          :src="Img"
          :style="imageStyle"
          class="optimized-image"
          alt="背景图片"
          @load="handleImageLoad"
      />
    </div>

    <!-- 第二层：文字内容 -->
    <div class="relative z-10 min-h-screen p-8">
      <!-- 左上方文字 -->
      <div class="absolute top-12 left-8 max-w-xs">
        <h2 class="text-5xl text-amber-50 font-serif mb-4 leading-tight">
          晨光熹微
        </h2>
        <p class="text-lg text-rose-50/90 font-light">
          新的一天<br>
          从温柔开始
        </p>
      </div>

      <!-- 中间主标题 -->
      <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
        <h1 class="text-7xl md:text-8xl font-bold text-white/95 mb-6 tracking-wider">
          Serenity
        </h1>
        <div class="w-32 h-1 bg-amber-200/80 mx-auto mb-8"></div>
        <p class="text-2xl text-rose-50/90 font-light italic">
          此刻 · 宁静
        </p>
      </div>

      <!-- 右下角文字 -->
      <div class="absolute bottom-12 right-8 text-right max-w-sm">
        <p class="text-4xl text-amber-100 font-serif mb-4">
          时光清浅
        </p>
        <p class="text-xl text-white/80 leading-relaxed">
          让美好<br>
          在指间停留
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import Img from '@/assets/img.png' // 确保图片路径正确
import { ref } from 'vue'
const imageStyle = ref({})
const handleImageLoad = (event) => {
  const target = event.target
  const aspectRatio = target.naturalWidth / target.naturalHeight

  // 根据容器宽度计算显示高度
  const containerWidth = document.querySelector('.image-container').clientWidth
  const displayHeight = containerWidth / aspectRatio

  imageStyle.value = {
    width: `${containerWidth}px`,
    height: `${displayHeight}px`,
    objectFit: 'cover'
  }
}
</script>

<style scoped>
.image-container {
  @apply relative w-full overflow-hidden;
}

.optimized-image {
  @apply absolute inset-0 transition-all duration-300;
}
/* 图片动画 */
.animate-image-fade {
  animation: imageFade 1.2s ease-out;
  min-width: 100%;
  min-height: 100%;
  will-change: transform;
}

/* 层级控制 */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }

@keyframes imageFade {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 保持图片比例的关键样式 */
.object-cover {
  object-fit: cover;
}
.object-center {
  object-position: center;
}
</style>
